#movebar { position: absolute; cursor:e-resize; z-index: 2000; user-select:none;}

#menu { position: fixed; top: 0px; left: 0px; bottom: 23px; width: 50px; background: #2c2c2c; padding: 5px 0 0 0;  user-select:none;}
#menu .item { line-height: 50px; text-align: center; color: #666; font-size: 25px;cursor: pointer; }
#menu .item.active { color: #f0f0f0; background: rgba(255, 255, 255, 0.2)}

#list { position: fixed; top: 0px; left: 50px; bottom:23px; width: 200px; background: #f3f3f3;overflow: auto; user-select:none;}

.list .list_title { font-size: 14px; line-height: 35px; background: #dddddd; padding: 0 0 0 10px;}
.list .list_title i { float: right; line-height: 35px; cursor: pointer; padding: 0 10px; font-size: 12px; }
.list .root { position: absolute; top:0px; bottom: 0px; left: 0; right: 0; overflow: hidden;}
.list .folder {position: relative;}
.list .title { padding: 1px 10px; font-size: 14px; position: relative; height: 21px; cursor: pointer;color: #333;}
.list .title:hover { background: #e8e8e8 ; }
.list .title .name {position: absolute; right: 0; font-size: 13px; left: 30px; top: -1px; bottom: 0; }
.list .title .index {  position: absolute; left: 0px; line-height: 23px; width: 18px; top: 0px; text-align: right;}
.list .title .text { position: absolute; right: 0; font-size: 13px; left: 25px; top: 0px; bottom: 0; overflow: hidden;text-overflow:ellipsis; white-space: nowrap; line-height: 23px;}
.list .title.active {background: #3399ff; color: #fff;}
.list .rename { position: absolute; top: 0;z-index: 101; left: 0px; right: 0; background: #3399ff; }
.list .rename .index{color: #fff; cursor: url('../img/mouse.png'),pointer;}
.list .rename .name { right: 1px;}
.list .rename input { padding: 0px; line-height: 21px; height: 21px; border:none; background: #fff; margin: 1px 0; width: 100%;}
.list .folder > .title i { margin: 0 5px 0 0; }
.list .interface > .title i { margin: 0 5px 0 0; font-size: 8px; font-style: normal; display: block; line-height: 23px; font-weight: bold; }
.list .interface > .title i.POST {  color:#f5a623 }
.list .interface > .title i.GET {  color:#7ed321 }
.list .interface > .title i.DEL {  color:#ed4b48 }
.list .interface > .title i.PUT {  color:#468aa5 }
.list .mark { position: absolute; z-index: 99; background: rgba(255, 255, 255, 0.5); top: 0; left: 0; right: 0; bottom: 0;}
.list .closeAllButton,.list .refreshButton,.list .newFolderButton ,.list .export {cursor: pointer; position: absolute;  top: 6px; height: 23px; width: 23px; line-height: 23px; text-align: center;}
.list .closeAllButton:hover,.list .refreshButton:hover,.list .newFolderButton:hover,.list .export:hover { background: #f0f0f0;}
.list .closeAllButton { right: 27px; font-size: 16px; line-height: 25px; }
.list .refreshButton { right: 2px; }
.list .newFolderButton { right: 52px; }
.list .export {right: 77px}

.tab-content {position: fixed; top: 0px; left: 250px; right: 0px; height: 35px; background: #f3f3f3; user-select:none; overflow-x: auto; overflow-y: hidden; z-index: 3; white-space: nowrap;}

#tab { position: fixed; top: 0px; left: 290px; right: 40px; height: 35px; background: #f3f3f3; user-select:none; overflow-x: auto; overflow-y: hidden; z-index: 3; white-space: nowrap;}
.tab-content .item { padding: 0 10px 0 17px; line-height: 35px; font-size: 12px; border: 1px solid #f3f3f3; border-width: 0 1px; margin:  0 0 0 -6px; display: inline-block;cursor: pointer; background: #ececec; }
.tab-content .item i { display: inline-block; vertical-align: middle;}
.tab-content .item-title {display: inline-block; max-width: 200px; vertical-align: middle; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; color: #8f8f8f;}
.tab-content .item.active { background: #fff;}
.tab-content .active .item-title { color: #333;}
.tab-content .close { width: 15px; height: 23px; margin: 1px 0 0 5px; opacity: 0; line-height: 21px; color: #666;}
.tab-content .close.fa-circle {  opacity: 1; font-size: 10px; color: #8f8f8f}
.tab-content .item:hover .close { opacity: 1; cursor: pointer;}
.tab-content .item.active .close.fa-circle { color: #f5a623}
.tab-content .item.active .close { opacity: 1; cursor: pointer;}
.tab-content .item i.file::before {font-size: 12px; font-style: normal; text-align: center; transform: scale(0.7);display: block; margin: 0 0 0 -3px;}
.tab-content .item i.file.POST::before { content: "POST";  color: #f5a623;}
.tab-content .item i.file.GET::before {content: "GET";  color: #7ed321; }
.tab-content .item i.file.PUT::before { content: "PUT";  color: #468aa5; }
.tab-content .item i.file.DEL::before {content: "DEL";  color: #ed4b48; }
.tab-content .fa-plus { color: #666;}
.tab-content .item.closeEle { position: absolute; right: 0; color: #666;}

#content {position: fixed; top: 35px; left: 250px; right: 0px; bottom:23px; background: #fff; padding: 10px; user-select:none; overflow-y: auto; overflow-x: hidden;}
.content_has_nothing { position: absolute; top: 0px; left: 0; right: 0; bottom: 0; background: #e0e0e0; z-index: 20; background-image: url('../img/icon.png'); background-repeat: no-repeat; background-position: center center;}
.content_header { height: 100px; position: relative; }
.content_title { height: 35px; line-height: 35px; color: #333; position: relative; margin: 0 0 0 6px; position: absolute; left:34px; top: 0px; right: 0px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
.content_title_index { height: 35px; line-height: 35px; border: none; float: left; width: 30px; cursor: url('../img/mouse.png'),pointer; color: #333; }
.content_title_input { height: 35px; line-height: 35px; color: #333; position: absolute !important; left:34px; top: 0px; right: 0px; }
.content_title_input .form_input.block {display: block; font-size: 16px; }
.content_description { font-size: 12px; padding: 4px; border: 1px solid #fff; color: #666; height: 50px; text-indent: 2em;line-height:16px; padding: 1px; overflow-y: auto;overflow-x: hidden; word-break:break-all; position: absolute; top: 37px; left: 0px; right: 0px; }
.content_description_textarea .form_textarea.block { position: absolute; top: 37px;  font-size: 12px; padding: 4px; border: 1px solid #ccc; height: 50px; text-indent: 2em; line-height:16px;padding: 1px;  }
.content_bar { height: 35px; position: relative;}
.content_select_box { position: absolute; top: 0px; left: 0px; width: 80px;}
.content_select_box .form_select .form_select_nameBox { border-radius: 5px 0 0 5px; background: #f0f0f0;}
.content_select_box .form_select .form_select_optionBox { top: 37px; border-radius: 5px 0 0 5px; border-color: #ccc; z-index: 12; }
.content_select_box .form_select.active .form_select_nameBox { border-color: #ccc !important; background: #fff; }
.content_select_box .form_select .form_select_nameBox span {width: 25px;}
.content_select_box .form_select .form_select_name { right: 25px; font-weight: bold; color: #666; }
.content_select_box .form_select .form_select_name.POST { color:#f5a623 }
.content_select_box .form_select .form_select_name.GET { color:#7ed321 }
.content_select_box .form_select .form_select_name.DEL { color:#ed4b48 }
.content_select_box .form_select .form_select_name.PUT { color:#468aa5 }
.content_select_box .form_select_option.POST { color:#f5a623 }
.content_select_box .form_select_option.GET { color:#7ed321 }
.content_select_box .form_select_option.DEL { color:#ed4b48 }
.content_select_box .form_select_option.PUT { color:#468aa5 }
.content_select_box .form_select_option.active.POST { background:#f5a623 }
.content_select_box .form_select_option.active.GET { background:#7ed321 }
.content_select_box .form_select_option.active.DEL { background:#ed4b48 }
.content_select_box .form_select_option.active.PUT { background:#468aa5 }

.content_url_box { position: absolute; left: 81px; top: 0px; width: 200px;}

.content_url_box .form_select .form_select_nameBox { background: #f0f0f0;}
.content_url_box .form_select .form_select_optionBox { top: 37px; border-color: #ccc; z-index: 12; }
.content_url_box .form_select.active .form_select_nameBox { border-color: #ccc !important; background: #fff; }
.content_url_box .form_select .form_select_nameBox span {width: 25px;}

.content_formatData { position: absolute; left: 10px; right: 51%; top: 150px; bottom: 10px; }
.content_response { position: absolute; right: 10px; left: 51%; top: 150px; bottom: 10px; }


.content_tab_button { float: left; height: 30px; cursor: pointer; line-height: 30px; font-size: 14px; padding: 0 15px; color: #aaa;  }
.content_tab_button:hover { color: #777;}
.content_tab_button.active { color: #444; }

.content_tab_button.modalButton { color: #666;  border: 1px solid #ccc; height: 24px; line-height: 24px; margin: 2px 0 0 0; border-radius: 3px;}

.content_tab_button.modalButton:hover { background: #dddddd;}

.requesterData { z-index: 10;}
.requesterHeader { z-index: 1;}

.content_formatData .readOnly .CodeMirror { background: #eee; }
.content_code .formDataLayout { position: relative; width: 100%; height: 100%; overflow: auto;}
.content_code .formDataTitle_item { float: left; width:  29.9999999%; line-height: 30px; height: 30px; text-align: center; color: #999; margin: 0 0 -1px -1px; border-right: 1px solid #ccc;}
.content_code .formDataTitle { border-bottom: 1px solid #ccc;}
.content_code .formDataListBox { padding: 0 0 60px 0; }
.content_code .formDataTitle_item.noborder { border: none;}
.content_code .formDataTitle_item input { border: none; color: #666; width: 90%; display: block; padding: 0; margin: 0 auto; line-height: 30px; height: 30px;}
.content_code .formDataTitle_item .form_select_nameBox { height: 30px; line-height: 30px; border: none;}
.content_code .formDataTitle_item .form_select { width: 95%; margin: 0 auto;}
.content_code .formDataList_item { border-bottom: 1px solid #ccc;}
.content_code .formDataList_item i { }

.content_code .formDataTitle .botton { cursor: pointer; height: 25px; width: 90%; line-height: 25px; border-radius: 2px; margin: 2px auto;; border: 1px solid #fff; }
.content_code .formDataTitle .botton:hover { background: #f0f0f0;  border: 1px solid #fafafa;}
.content_code .formDataList_item .botton { cursor: pointer; height: 25px; width: 90%; line-height: 25px; border-radius: 2px; margin: 2px auto;; border: 1px solid #fff; }
.content_code .formDataList_item .botton:hover { background: #f0f0f0;  border: 1px solid #fafafa;}




.content_textarea_box { position: absolute; top: 0px; left: 281px; right: 180px; height: 33px; border: 1px solid #ccc; border-radius: 0 5px 5px 0;}
.content_textarea_show_box {min-height: 19px; position: absolute; padding: 7px; overflow: hidden; text-overflow:ellipsis; background: #f0f0f0; white-space: nowrap; top: 0; left: 0;  right: 0; line-height: 19px; font-size: 14px; color: #666; border-radius: 0px 5px 5px 0px; }
.content_textarea { padding: 7px; min-height: 19px; line-height: 19px; font-size:14px; color: #333;background: #fff; position: absolute; z-index: 20; position: absolute;top: -1px; left: -1px;  right: -1px; border-radius: 0px 5px 5px 0px; border: 1px solid #ccc;}
.content_textarea:focus{ background: #fff;outline:0; }
.content_send_box {position: absolute; top: 0px; width: 95px; right: 80px; height: 35px; line-height: 35px; text-align: center; background: #3399ff; color: #fff; text-align: center; font-size: 16px; border-radius: 5px; overflow: hidden; cursor: pointer; }
.content_sending { background: rgba(255, 255, 255, 0.3)}
.content_save_box {position: absolute; top: 0px; width:73px; right: 0px; border: 1px solid #ccc; height: 33px; line-height: 33px; text-align: center; background: #f0f0f0; color: #999; text-align: center; font-size: 16px; border-radius: 5px; overflow: hidden; cursor: pointer;}
.content_code {border: 1px solid #ccc; position: absolute; top: 67px; bottom: 0px; border-radius: 5px; width: 100%; position: absolute;}

.content_code.requesterForm { background: #fff;}
.content_code_title {color: #666; height: 67px; line-height: 30px;}
.content_code_title .format { font-size: 14px; vertical-align: middle; cursor: pointer; position: absolute; top: 0px; right: 0px;line-height: 30px;}
.content_code_loading { position: absolute; top: 0px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 19; text-align: center; line-height: 100px; }
.content_code_loading::before { content : 'Loading...'; font-size: 30px; color: #999; }
.content_botton_cancel { position: absolute; top: 100px; line-height: 30px; border: 1px solid #ccc; width: 100px; border-radius: 3px; left: 50%; margin: 0 0 0 -50px; text-align: center; color: #999; background: #eee}
.content_botton_cancel:hover {background: #e0e0e0; cursor: pointer;}

#search { position: fixed; top: 0px; left: 50px; bottom: 23px; width: 200px; background: #f3f3f3;overflow: auto; user-select:none;}

.search_input { position: relative; height: 35px; background: #dddddd}
.search_input .search_box {position: absolute; top: 4px; left: 4px; right: 34px; border: 1px solid #ccc; color: #666; bottom: 4px; padding: 0 5px;border-radius: 50px; background: #fff;}
.search_input .input_box {position: absolute; top: 0px; left: 50px; right: 5px; height: 25px;}
.search_input input { padding: 0px; margin: 0px; height: 25px; border: none; color: #666; width: 100%; background: none; }
.search_input i { width: 25px; height: 25px; background: #fff; font-size: 13px; line-height: 25px; color: #666; text-align: center; position: absolute; right: 4px; top: 4px; border: 1px solid #ccc; cursor: pointer; border-radius: 50px;}
.search_input i:hover {background: #f0f0f0;}
.search_list { position: absolute; top: 35px; bottom: 0; left: 0; right: 0; overflow-y: auto; overflow-x: hidden;}
#search .search_input .form_select { left: -5px; width: 50px; height: 25px;}

#search .search_input .form_select_nameBox { border: none; height: 25px; width: 50px; background: #f0f0f0; text-align: center; border-radius: 50px 0 0 50px;}
#search .search_input .form_select_nameBox span { display: none }
#search .search_input .form_select_name { left: 2px; right: 2px; line-height: 25px;}
#search .search_input .form_select_optionBox { border-radius:3px; border-color: #ccc;}
#search .search_input .form_select .form_select_name.POST { color:#f5a623 }
#search .search_input .form_select .form_select_name.GET { color:#7ed321 }
#search .search_input .form_select .form_select_name.DEL { color:#ed4b48 }
#search .search_input .form_select .form_select_name.PUT { color:#468aa5 }
#search .search_input .form_select_option.POST { color:#f5a623 }
#search .search_input .form_select_option.GET { color:#7ed321 }
#search .search_input .form_select_option.DEL { color:#ed4b48 }
#search .search_input .form_select_option.PUT { color:#468aa5 }
#search .search_input .form_select_option.active{ color:#fff;}
#search .search_input .form_select_option.active.ALL { background:#666 }
#search .search_input .form_select_option.active.POST { background:#f5a623 }
#search .search_input .form_select_option.active.GET { background:#7ed321 }
#search .search_input .form_select_option.active.DEL { background:#ed4b48 }
#search .search_input .form_select_option.active.PUT { background:#468aa5 }

#search .mark { color: #999; text-align: center; width: 100%; font-size: 14px; text-align: center; line-height: 130px;}

.contextmenu { position: absolute; z-index: 30; border: 1px solid #ccc; background: #fff;user-select:none; }
.contextmenu .item { line-height: 28px; cursor: pointer; padding: 0 13px; color: #333; font-size: 14px; border-bottom: 1px solid #ccc;}
.contextmenu .item:hover { background: #f0f0f0;}
.contextmenu .item:last-child { border:none; }

.dialog{position:fixed;top:0;left:0;width:100%;height:100%;user-select:none;}
.dialog .dialog-bg{width:100%;height:100%;background:rgba(0, 0, 0, 0.4)}
.dialog .dialog-main{position:absolute;top:50%;left:50%;margin:-251px 0 0 -301px;width:600px;height:500px;background:#fff; border-radius: 3px; overflow: hidden;}
.dialog .dialog-title{padding:0 20px;height:35px;border-bottom:1px solid #ccc;background:#2c2c2c;color:#fff;font-size:14px;line-height:35px; position: relative;}
.dialog .dialog-close{float:right;color:#fff;font-size:18px;cursor:pointer;}
.dialog .dialog-title-text{position: absolute; top: 0; left: 20px; right: 60px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.dialog .dialog-footer{position:absolute;bottom:6px;width:100%;text-align:right}
.dialog .dialog-body{overflow-x:hidden;overflow-y:auto;height:400px;width: 600px;box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.2)}
.dialog .dialog-footer-text{position:absolute;bottom:0;width:100%;height:24px;background:#f7ebb7;color:#000;text-align:right;font-size:12px;line-height:24px}

.btn{display:inline-block;margin:0 5px;width:80px;padding:0 8px;height:28px;font-size:14px;color:#666;line-height:28px;border-radius:3px;text-align:center; cursor: pointer; border: 1px solid #ccc;}
.btn:hover { background: #666; color: #fff; border-color: #666;}
.btn span{display:block;float:left;line-height:28px;margin:0 0 0 5px}

.status_bar { position: absolute; bottom: 0px; text-align: right; left: 0; right: 0; background: #3399ff; color: #fff; font-size: 12px; line-height: 23px;user-select:none;}
.status_bar div {padding: 0 5px; cursor: pointer; display: inline-block;}
.status_bar div:hover { background: rgba(255, 255, 255, 0.2)}

#note { position: absolute; top: 0px; left: 50px; background: #f3f3f3; z-index: 2100; right: 0; bottom: 23px; overflow-y: scroll; }
#note .box { position: absolute; top: 0; left: 0; right: 180px; min-height: 100%;}
#note .scroll { position: fixed;  bottom: 100px; right: 17px; z-index: 501; width: 127px; max-height: 600px; overflow-y: scroll; }
#note .scroll .year { position: relative; color: #666; font-size: 14px; line-height: 30px;}
#note .scroll .year .year_num { position: absolute;}
#note .scroll .year .mouthList { margin:  0 0 0 60px; padding-left: 10px; border-left: 2px solid #2aa152 }
#note .scroll .year .mouthList .mouth_num { line-height: 30px; position: relative;}
#note .scroll .year .mouthList .mouth_num::before { content: ''; position: absolute; width: 10px; height: 10px; left: -16px; border-radius: 50%; background: #2aa152; top: 9px}


.noteItem { position: relative; margin: 20px 0; min-height: 50px; width: 100%; background: #f3f3f3; padding: 0 20px 20px 20px; }
.noteItem .point { width: 10px; height: 10px; border-radius: 50%;  border: 2px solid #35b961; position: absolute; top: 8px; left: 10px;}
.noteItem .point::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #35b961; position: absolute; top: 3px; left: 3px;  }
.noteItem .time { font-size: 16px; color: #666;  position: absolute; left: 40px; top: 0px; line-height: 30px; }
.noteItem .line { position: absolute; width: 3px; background: #35b961; top: 30px; left: 15px; bottom: -20px;}
.noteItem .content {  border-radius: 10px; position: relative; padding: 10px 20px 0px 20px; border: 1px solid #ccc; min-height: 30px; background: #fff; margin: 40px 0 0 40px;}
.noteItem .content.refresh{margin: -42px 0 0 200px;}
.noteItem .showBox .title { position: relative;  color: #666; height: 25px; line-height: 25px; margin-bottom: 10px; font-size: 15px; border-radius: 3px; } 
.noteItem .showBox .title:hover { background: rgba(0, 0, 0, 0.05); }
.noteItem .showBox .titleText { font-weight: bold; position: absolute; top: 0px; left: 5px; right: 80px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 
.noteItem .showBox .title .editor,.noteItem .showBox .title .delete { cursor: pointer; width: 25px; height: 25px;display: none; position: absolute; top: 0px;  text-align: center; line-height: 25px;}
.noteItem .showBox .title .editor:hover,.noteItem .showBox .title .delete:hover { background: #fff;}
.noteItem .showBox .title .editor{right: 30px;}
.noteItem .showBox .title .delete{right: 5px;}
.noteItem .showBox .title:hover .editor,.noteItem .showBox .title:hover .delete{display: block;}
.noteItem .description { font-size: 14px; line-height: 21px; color: #666; margin-bottom: 10px; }
.noteItem .subset { padding: 10px; padding-top: 0;}
.noteItem .subset .subItem { border-bottom: 1px solid #ccc;  margin: 0 0 20px 0;}
.noteItem .subset .subItem:last-child {border-bottom: none;  margin: 0;}

.noteItem .subset_title { line-height: 30px; user-select:none; margin-bottom: 10px; background: rgba(0, 0, 0, 0.1); margin: 0 -10px 10px -10px; text-indent: 5px; border-radius: 3px; color: #666; }
.noteItem .changeButton { float: right; line-height: 30px; width: 23px; font-size: 20px; color: #666; margin: 0 5px 0 0; cursor: pointer;}
.noteItem .changeButton:hover { background: #f0f0f0; }
.noteItem .addButton { float: right; line-height: 30px; padding: 0 10px 0 0;  margin: 0 5px 0 0; font-size: 14px; cursor: pointer; }
.noteItem .addButton .fa { margin: 0 5px 0 0; color: #3399ff}
.noteItem .addButton:hover { background: #f0f0f0; }
.noteItem .editorBox { padding:10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 3px; box-shadow: inset 0 0 3px #ccc;}
.noteItem .editorBox .form_input.block { width: 100%; margin-left: -1px;}
.noteItem .editorBox .form_textarea.block { width: 98%; padding: 5px 1%; height: 500px; margin: 10px 0 10px -1px;}
.noteItem .editorBox .button { width: 100px; cursor: pointer; border-radius: 3px; margin: 0 0 0 10px; text-align: center; height: 30px; line-height: 30px; border: 1px solid #ccc; font-size: 14px; color: #666; float: right; }
.noteItem .editorBox .confirm{ background: #35b961;color: #fff; border-color:#35b961 }
.noteItem .editorBox .confirm:hover {background: #2aa152;border-color:#2aa152}
.noteItem .editorBox .cancel:hover {background: #eee;}
.noteItem .editorBox .searchBox { position: relative;float: left;  height: 200px; width: 45%; margin: 0 0 10px 0;}
.noteItem .editorBox .cf { height: 1px; width: 100%; clear: both;} 
.noteItem .editorBox #search { position: absolute; left: 0; width: 100%; bottom: 0px;}
.noteItem .editorBox .pushToAnswerBox { width: 5%; float: left; height: 200px; position: relative;}
.noteItem .editorBox .pushToAnswerBox i {cursor: pointer; width: 30px; height: 50px; color: #666; text-align: center; line-height: 50px; border: 1px solid #ccc; border-radius: 3px; position: absolute; top: 50%; right: -16px; margin: -26px 0 0 0;}
.noteItem .editorBox .pushToAnswerBox i:hover { background: #eee;}
.noteItem .imageList { background: #f3f3f3; margin: 0 0 10px 0;}
.noteItem .editorBox .answerBox {  height: 200px; width: 45%; margin: 0 0 10px 0; background: #f3f3f3;float: right; position: relative; overflow-y: scroll; }
.noteItem .editorBox .answerBox .empty { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 300px; text-align: center; color: #999; font-size: 16px; }
.noteItem .editorBox .list .title .text { right: 30px;}

.noteItem .editorBox .list .title  i.fa { position: absolute; font-weight: normal; color: #666; right: 0; top: 0; width: 23px; height: 23px; line-height: 23px; text-align: center; font-size: 16px; margin: 0; }
.noteItem .editorBox .list .title  i.fa:hover { background: #fff;}
.noteItem .imageList.list .interface .title { margin: 0;}
.noteItem .imageList.list .interface .index {line-height: 25px; width: 25px; display: none;}
.noteItem .imageList.list .interface .text {line-height: 25px; left: 5px; }
.noteItem  .imageList .img_item { line-height: 23px; font-size: 14px; color: #666; }
.noteItem .imageList_title { text-indent: 5px; font-size: 14px; color: #666; border-bottom: 1px solid #ccc; line-height: 30px;}
.noteItem .imageList .img_item { padding: 0 10px; position: relative; border-bottom: 1px dotted #ccc; height: 23px; }
.noteItem .imageList .img_item:hover { background: #eee;}
.noteItem .imageList .img_item .fa { cursor: pointer; width: 23px; height: 23px; position: absolute; top: 0px;  text-align: center; line-height: 23px; right: 0;}
.noteItem .imageList .img_item .fa:hover { background: #fff;}
.noteItem .imageList .img_item_text { cursor: pointer; position: absolute; top: 0; left: 10px; right: 50px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.note_readFile { padding: 20px;}
.note_readFile .form_input { margin-bottom: 20px;}


.noteItem.interface_flicker{ animation: flicker .5s; }
.noteItem .editorBox .interface_flicker{ animation: flicker .5s; }
@keyframes flicker {
    0%{background: #ddd;}
    10%{background: #f3f3f3;}
    20%{background: #ddd;}
    30%{background: #f3f3f3;}
    40%{background: #ddd;}
    50%{background: #f3f3f3;}
    60%{background: #ddd;}
    70%{background: #f3f3f3;}
    80%{background: #ddd;}
    100%{background: #f3f3f3;}
}



.dialog .dialog-body.imagePreviewTool {width:100%;height:auto;position:absolute;bottom:0;top:36px;overflow: hidden;background: #eee; }

.dialog .dialog-body.imagePreviewTool .imageBox { width: 100%; height: 100%; position: absolute;}
.dialog .dialog-body.imagePreviewTool .imageBox img {display: block; width: 100%; height: 100%;}
.dialog .dialog-body.imagePreviewTool .pre,
.dialog .dialog-body.imagePreviewTool .next { position: absolute; top: 0; width: 120px; height: 100%; opacity: 0; }
.dialog .dialog-body.imagePreviewTool .pre:hover,
.dialog .dialog-body.imagePreviewTool .next:hover { opacity: 1; }
.dialog .dialog-body.imagePreviewTool .pre { left: 0;}
.dialog .dialog-body.imagePreviewTool .next {right: 0;}
.dialog .dialog-body.imagePreviewTool .pre .fa,
.dialog .dialog-body.imagePreviewTool .next .fa { cursor: pointer; border: 5px solid rgba(0, 0, 0, 0.6); position: absolute; left: 25px; top: 50%; margin: -30px 0 0 0; border-radius: 50%; width: 60px; height: 60px; line-height: 55px; font-size: 65px; color: rgba(0, 0, 0, 0.6); }
.dialog .dialog-body.imagePreviewTool .pre .fa::before { width: 39px; display: block; text-align: right;}
.dialog .dialog-body.imagePreviewTool .next .fa::before { width: 44px; display: block; text-align: right;}


.dialog .dialog-body.imagePreviewTool .toolBox { width: 120px; background: rgba(0, 0, 0, 0.3); height: 40px; text-align: center; border-radius: 20px; position: absolute; bottom: 20px; left: 50%; margin: 0 0 0 -60px }
.dialog .dialog-body.imagePreviewTool .toolBox .fa { cursor: pointer; width: 28px; display: inline-block; height: 40px; text-align: center; line-height: 40px; color: rgba(255, 255, 255, 0.7); font-size: 16px;}
.dialog .dialog-body.imagePreviewTool .toolBox .fa:hover { color: rgba(255, 255, 255, 1)}
.dialog .dialog-body.imagePreviewTool .mark { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


.dialog .dialog-body.imagePreviewTool .message { opacity: 0;pointer-events: none; position: absolute; width: 200px; background: rgba(0, 0, 0, 0.3);color: rgba(255, 255, 255, 0.7); height: 40px; line-height: 40px; text-align: center; top: 50%; left: 50%; margin: -20px 0 0 -100px;border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.3); }

.modal { position: absolute; top: 0px; left: 50px; background: #f3f3f3; z-index: 2100; right: 0; bottom: 23px; overflow-y: scroll;  }


.modal .modalSearchBox { position: absolute; z-index: 5; left: 20px; top: 20px; right: 250px; height: 50px; border-radius: 50px; padding: 0 20px; border: 1px solid #ccc; overflow: hidden; background: #fff;}
.modal .modalSearchBox input { width: 100%; height: 100%; border: none; padding: 0px; margin: 0px; background: #fff; }

.modal .modalSearchBox input:focus{ outline:0 }
.modal .addModalButton { position: absolute; z-index: 5; right: 100px; cursor: pointer; top: 20px; background: #fff; width: 130px; text-align: center; height: 50px; border-radius: 50px; border: 1px solid #ccc; line-height: 50px; }
.modal .addModalButton:hover { background: #fafafa;}

.modal .modalRefresh { position: absolute; z-index: 5; cursor: pointer; color: #333;  right : 20px; top: 20px; border: 1px solid #ccc; border-radius: 50px; background: #fff; height: 50px; width: 60px; text-align: center; line-height: 50px;  }
.modal .modalRefresh:hover { background: #fafafa;}

.modal .modalBox { padding: 100px 20px 20px 20px ; position: relative; }
.modal .modalItem { border: 1px solid #ccc; position: relative; border-radius: 5px; background: #fff; padding: 10px; margin: 20px 0 0 0;}
.modal .modalItem .modalTitleBox { position: relative; height: 25px;}
.modal .modalItem .TitleBox { position: absolute; left: 0px; right: 40px; overflow: hidden; height: 25px;}
.modal .modalItem .modalTitle { font-size: 18px;  color: #333; padding-right: 10px;}
.modal .modalItem .modalName { font-size: 16px; color: #666;}
.modal .modalItem .TitleIcon  {position: absolute; font-size: 22px; right: 10px; line-height: 25px;}
.modal .modalItem .modalTitleBox:hover { background: #f0f0f0;}
.modal .modalItem .modalBody {padding: 10px 0 0 0; margin: 10px 0 0 0; border-top: 1px solid #ccc; color: #666; font-size: 18px; }
.modal .modalItem .modalEditor { float: right;  margin: 10px 0 0 10px; border: 1px solid #ccc; padding: 3px 10px; border-radius: 3px;}
.modal .modalItem .modalEditor i { font-size: 20px; }
.modal .modalItem .modalEditor:hover { background: #f0f0f0; cursor: pointer; }
.modalEditorDialog  textarea { height: 300px;}

.modal .modalItem .modalBody .line_item { border-left: 1px solid #ccc; border-top: 1px solid #ccc; color: #333; padding: 3px 0; width: 33%; float: left; text-align: center;}
.modal .modalItem .modalBody .title .line_item { color: #999;}
.modal .modalItem .modalBody { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
.modalContentDialog.modal { top: 35px; left: 0px;bottom: 50px; background: none; }
.modalContentDialog.modal .modalContentSearchBox { position: absolute; top: 10px; left: 10px; overflow: hidden; padding: 0 10px; right: 80px; height: 50px; border-radius: 50px; border: 1px solid #ccc;}
.modalContentDialog.modal .modalContentSearchBox input { width: 100%; height: 100%; border: none; padding: 0px; margin: 0px; background: #fff; }
.modalContentDialog.modal .modalContentSearchBox input:focus{ outline:0 }
.modalContentDialog.modal .modalContentBox { padding: 70px 10px 0 10px;} 
.modalContentDialog.modal .modalContentRefresh { height: 50px; border: 1px solid #ccc; cursor: pointer; border-radius: 50px; text-align: center; line-height: 50px; position: absolute; width: 60px; top: 10px; right: 10px;} 
.modalContentDialog.modal .modalContentRefresh:hover { background: #f0f0f0;}


#urlModal { position: absolute; top: 0px; left: 50px; background: #f3f3f3; z-index: 2100; right: 0; bottom: 23px; overflow-y: scroll;  }

#urlModal .addbutton { border-radius: 3px; width: 150px; font-size: 16px; text-align: center; background: #3399ff; margin: 20px; color: #fff; padding: 5px 0; }
#urlModal .urlBox { padding: 20px;}
#urlModal .urlBox .urlItem { border-bottom: 1px solid #ccc; padding: 5px 70px 5px 0; margin: 5px 0 12px 0; position: relative; }
#urlModal .urlBox .urlItem i { position: absolute;  top: -5px; height: 30px; border: 1px solid #ccc; cursor: pointer; width: 30px;border-radius: 3px; text-align: center; line-height: 30px; color: #666; cursor: pointer; }
#urlModal .urlBox .urlItem i:hover { background: #fff;}
#urlModal .urlBox .urlItem i.edit {right: 35px; }
#urlModal .urlBox .urlItem i.delete {right: 0; }
#urlModal .urlBox .urlItem .name {font-size: 18px; margin: 0 10px 0 0; color: #999;display: inline-block; width: 200px;}
#urlModal .urlBox .urlItem .url { font-size: 18px; color: #666;}
/* * {background: #ddffe9} */
